<script setup lang="ts">
import {ref} from "vue";

// import Player from "xgplayer";
// import "xgplayer/dist/index.min.css";
//
// onMounted(() => {
//   new Player({
//     id: "mse", //元素id
//     lang: "zh", //设置中文
//     volume: 0, // 默认静音
//     autoplay: false, //自动播放
//     screenShot: true, // 开启截图功能
//     //视频地址
//     url: "https://youtu.be/lbOmcCR3CvA",
//     //封面图
//     poster:
//         "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
//     fluid: true, // 填满屏幕 （流式布局）
//     playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
//   });
// });
const onVideo = () => {
  console.log("点击视频。。。。")
}
/**
 * 图片是否加载完成
 */
const home_image1_load = ref(false)

/**
 * 是否显示遮罩层
 */
const overlay = ref(false);

/**
 * 图片加载完成回调
 * @param val 图片地址
 */
const image_load = (val: any) => {
  home_image1_load.value = true;
}

</script>

<template>
  <v-app>
    <!--    遮罩层-->
    <v-overlay v-model="overlay" class="d-flex justify-center align-center">
      <!--接入youtobe的视频 -->
      <v-sheet>
        <!--        第一种-->
        <!--        <iframe title="vimeo-player" src="https://www.youtube.com/embed/9zyDnnGrY_I?&loop=1" width="1500" height="800"-->
        <!--                frameborder="0" allowfullscreen></iframe>-->

        <!--        第二种-->
        <!--        <iframe width="2180" height="1227" :src="`https://www.youtube.com/embed/9zyDnnGrY_I`"-->
        <!--                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;-->
        <!--            picture-in-picture" allowfullscreen-->
        <!--        ></iframe>-->

        <!--        第三种-->
        <!--        <you-tube video-url="https://www.youtube.com/embed/9zyDnnGrY_I?&loop=1" width="1500" height="800"/>-->
                <video-you-tube video-url="https://www.youtube.com/embed/9zyDnnGrY_I?&loop=1" width="1500" height="800"/>
<!--        <test/>-->
      </v-sheet>
    </v-overlay>
    <v-sheet class="pt-2">
      <v-card flat elevation="0" class="rounded-0">
        <v-img
            cover
            max-height="1080"
            class="mt-16"
            @load="image_load"
            src="https://cdn.tearful.cn/shop/videos/barton-sofa_tan-vegan-leather-stain-resistant_1.webp"/>
        <v-skeleton-loader v-if="!home_image1_load" height="760">
        </v-skeleton-loader>
      </v-card>
    </v-sheet>

    <v-sheet class="py-16 d-md-flex justify-md-center">
      <v-sheet max-width="1020" class="py-8">
        <v-row no-gutters>
          <!--  视频-->
          <v-col cols="12" md="6" class="d-flex align-center justify-center ">
            <v-card flat rounded="0" width="450" height="332"
                    class="d-flex justify-center align-center"
                    image="https://cdn.tearful.cn/shop/videos/KOVA_ASSEMBLYVIDEO_928x672_1_480x352.webp">
              <v-icon @click="overlay=true" color="#fff" icon="mdi-play-circle" size="88"></v-icon>
            </v-card>
          </v-col>
          <v-col cols="12" md="6" class="d-flex">
            <v-card flat rounded="0" color="transparent" class="px-6 d-flex align-center ">
              <div class="text-[#413E3A] ">
                <h1 class="font-serif font-semibold text-2xl py-8">Easy to Move + Assemble</h1>
                <div class="text-sm leading-9">
                  <p class=" ">Albany Park furniture comes packaged in apartment-friendly, space-conscious boxes that
                    can easily be maneuvered in stairwells, tight hallways and throughout any home. It literally takes
                    15 minutes to assemble an Albany Park - we promise!
                  </p>
                  <p class="py-10">Watch how easy it is.</p>
                </div>
              </div>
            </v-card>
          </v-col>
        </v-row>
      </v-sheet>
    </v-sheet>

    <!--    <div id="mse"></div>-->

  </v-app>
</template>

<style scoped>

</style>